<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="10">
        <kjrk :dataList="dataInfo.quickEntryButton" :id="dataInfo.id" @update="getData" />
      </el-col>
      <el-col :span="7" class="pl0">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.a2 ? dataInfo.a2.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.a2, 1, 'a2')" />
          </div>
          <component :is="dataInfo.a2 ? dataInfo.a2.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
      <el-col :span="7" class="pl0">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.a3 ? dataInfo.a3.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.a3, 1, 'a3')" />
          </div>
          <component :is="dataInfo.a3 ? dataInfo.a3.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mt10">
      <el-col :span="7" class="pr0">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.b1 ? dataInfo.b1.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.b1, 1, 'b1')" />
          </div>
          <component :is="dataInfo.b1 ? dataInfo.b1.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
      <el-col :span="7" class="pr0">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.b2 ? dataInfo.b2.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.b2, 1, 'b2')" />
          </div>
          <component :is="dataInfo.b2 ? dataInfo.b2.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.b3 ? dataInfo.b3.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.b3, 2, 'b3')" />
          </div>
          <component :is="dataInfo.b3 ? dataInfo.b3.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mt10">
      <el-col :span="12" class="pr0">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.c1 ? dataInfo.c1.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.c1, 2, 'c1')" />
          </div>
          <component :is="dataInfo.c1 ? dataInfo.c1.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.c2 ? dataInfo.c2.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.c2, 2, 'c2')" />
          </div>
          <component :is="dataInfo.c2 ? dataInfo.c2.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mt10">
      <el-col :span="24">
        <el-card class="card">
          <div class="space-between">
            <h1 class="bold">{{ dataInfo.d1 ? dataInfo.d1.name : '请选择卡片' }}</h1>
            <svg-icon icon-class="more" class-name="more pointer" @click="handleClick(dataInfo.d1, 3, 'd1')" />
          </div>
          <component :is="dataInfo.d1 ? dataInfo.d1.componentName : ''" :dataInfo="info" />
        </el-card>
      </el-col>
    </el-row>

    <help-dialog title="排版" :visible.sync="dialogVisible" @close="handleClose" width="80%">
      <el-row :gutter="24">
        <el-col :span="12" v-for="item in dataList" :key="item.id" class="mb20">
          <el-card>
            <div class="space-between">
              <h1 class="bold">{{ item.name }}</h1>
              <el-radio v-model="checkItem" :label="item.id" class="radio"></el-radio>
            </div>
            <component :is="item.componentName" :dataInfo="info" />
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </help-dialog>
  </div>
</template>

<script>
import { homePageConfig, userConfigList, homePageConfigModify, agricultureList, getData } from '@/api/index'
import Kjrk from '@/views/components/index/Kjrk'
import Lnzzqs from '@/views/components/index/Lnzzqs'
import Sjzl from '@/views/components/index/Sjzl'
import Cbsj from '@/views/components/index/Cbsj'
import Ndptfw from '@/views/components/index/Ndptfw'
import Byptfw from '@/views/components/index/Byptfw'
import Ntfb from '@/views/components/index/Ntfb'
import Dqndcz from '@/views/components/index/Dqndcz'
import Jyhsj from '@/views/components/index/Jyhsj'
import Fwzx from '@/views/components/index/Fwzx'

export default {
  name: 'Index',
  components: { Kjrk, Lnzzqs, Sjzl, Cbsj, Ndptfw, Byptfw, Ntfb, Dqndcz, Jyhsj, Fwzx },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      info: [],
      arry: [],
      tudiArry: [],
      dataInfo: {},
      // 所有卡片列表
      list: [],
      // 弹窗中的卡片列表
      dataList: [],
      dialogVisible: false,
      type: '',
      checkItem: ''
    }
  },
  created() {
    this.getAgricultureList()
    this.getData()
    this.getList()
  },
  methods: {
    getData() {
      homePageConfig().then((res) => {
        this.dataInfo = res.data
      })
    },
    async getAgricultureList() {
      const { rows } = await agricultureList()
      if (rows.length > 0 && rows[0].data.val) this.info = rows[0].data
      else {
        const { data } = await getData()
        this.info = data
      }
    },
    // 卡片列表
    getList() {
      userConfigList().then((res) => {
        this.list = res.data
      })
    },
    handleClose() {
      this.dataList = []
    },
    handleClick(item, value, label) {
      const size = item ? item.size : value
      this.type = label
      this.checkItem = item ? item.id : ''
      this.dataList = this.list.filter((e) => e.size == size)
      this.dialogVisible = true
    },
    handleUpdate() {
      if (!this.checkItem) return this.$message.warning('请选择')
      homePageConfigModify({ [this.type]: this.checkItem, id: this.dataInfo.id }).then((res) => {
        this.$message.success('操作成功')
        this.dialogVisible = false
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f7f7f7;
  .card {
    min-height: 298px;
  }
  .more {
    height: 20px;
    width: 20px;
  }
  .radio {
    ::v-deep .el-radio__label {
      display: none;
    }
  }
}
</style>
